<template>

	<el-dialog v-model="dialogVisible" :title="dialogTitle" :before-close="closeDialog" class="elDiaLog" lock-scroll
		width="1000px" :close-on-click-modal="false" :close-on-press-escape="false">
	
		
		<div class="form-box list-info" 
			v-loading="loading2" v-if="['act_audit'].includes(dialogStatus)">
			<el-form ref="dataFormRef" 
				:model="formData"  label-width="150px">
				
				<el-form-item  label="工程名称:" >
					<span>{{dataInfo.payment[0]?.engine?.name}}</span>
				</el-form-item>	
				<el-form-item  label="业务名称:" >
					<span>{{dataInfo.payment[0]?.name}}</span>
				</el-form-item>	
				
				<el-form-item  label="所属部门:" >
					<span>{{dataInfo.payment[0]?.department?.name}}</span>
				</el-form-item>	
				<el-form-item  label="部门领导:" >
					<span>{{dataInfo.payment[0]?.leader_user?.name}}</span>
				</el-form-item>	
				<el-form-item  label="紧急程度:" >
					<span>
						<el-tag v-if="dataInfo.payment[0]?.level == 2"  type="danger">紧急</el-tag>
						<el-tag v-else type="primary">普通</el-tag>
					</span>
				</el-form-item>	
				<el-form-item  label="申请事由:" >
					<span>{{dataInfo.payment[0]?.content}}</span>
				</el-form-item>
				<el-form-item  label="业务依据:" >
					<span>{{dataInfo.payment[0]?.yiju}}</span>
				</el-form-item>
				<el-form-item  label="预算金额:" >
					<span>{{dataInfo.payment[0]?.amount}}</span>
				</el-form-item>
				<el-form-item  label="附件:" >
					<span><div v-if="dataInfo.payment[0]?.files?.length >0" v-for="(ite,ind) in dataInfo.payment[0]?.files">
						<el-link @click="onFilePreview(ite)" type="primary">{{ind + 1}}.{{ite.name}}</el-link>
					</div>
					<el-link v-else type="info">无</el-link></span>
				</el-form-item>
				<el-form-item  label="申请人:" >
					<span>{{dataInfo.payment[0]?.user?.name}}</span>
				</el-form-item>	
				<el-form-item  label="申请时间:" >
					<span>{{dataInfo.payment[0].add_time_text}}</span>
				</el-form-item>
				<el-form-item  label="处理结果" >
					<el-input
					   v-model="formData.mark"
					   :rows="6"
					   type="textarea"
					   placeholder="请输入处理结果"
					 />
				</el-form-item>	
			</el-form>
				
		</div>
		<div class="form-box" v-if="['act_info'].includes(dialogStatus)" v-loading="loading2">
			<el-descriptions size="default" :column="1" border>
				
				<el-descriptions-item label-class-name="labelC1"
					label="工程名称："><span>{{dataInfo.payment[0]?.engine?.name}}</span>
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1" 
					label="业务名称：">{{dataInfo.payment[0]?.name}}
				</el-descriptions-item>
	
				<el-descriptions-item label-class-name="labelC1"
					label="所属部门：">{{dataInfo.payment[0]?.department?.name}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="部门领导：">{{dataInfo.payment[0]?.leader_user.name}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1" 
					label="紧急程度：">
						<el-tag v-if="dataInfo.payment[0]?.level == 2"  type="danger">紧急</el-tag>
						<el-tag v-else type="primary">普通</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="申请事由：">{{dataInfo.payment[0]?.content}}
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="业务依据：">{{dataInfo.payment[0]?.yiju}}
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="预算金额：">{{dataInfo.payment[0]?.amount}}
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="附件：">
					<div v-if="dataInfo.payment[0].files?.length >0" 
					v-for="(ite,ind) in dataInfo.payment[0]?.files">
						<el-link @click="onFilePreview(ite)" type="primary">{{ind + 1}}.{{ite.name}}</el-link>
					</div>
					<el-text v-else type="info">无</el-text>
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="申请人：">
					{{dataInfo.payment[0]?.user?.name}}
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="申请时间：">{{dataInfo.payment[0]?.add_time_text}}
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="审核状态：">
					<el-tag style="margin-right: 10px;" :type="titModel[dataInfo.status].type">{{titModel[dataInfo.status].title}}</el-tag>
					<el-text style="margin-left: 5px;" v-if="dataInfo.status == 2 ||dataInfo.status == 1 "  type="primary">{{dataInfo.check_time_text}}</el-text>
				</el-descriptions-item>
			</el-descriptions>
			
			<template v-if="dataInfo.log?.length>0">
				<el-divider content-position="left">审核日志</el-divider>
				<el-row>
					<el-table border  :data="dataInfo?.log" style="width: 100%">
						<el-table-column label="审核人" width="200">
							<template #default="scope">
								<i class="el-icon-user" />
								{{ scope.row.user.name }}
							</template>
						</el-table-column>
						<el-table-column label="审核状态" align="center" width="150">
							<template #default="scope">
								<el-tag
									:type="titModel[scope.row.status].type">{{titModel[scope.row.status].title}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作日期" width="220">
							<template #default="scope">
								<el-icon> <el-icon-timer></el-icon-timer></el-icon>
								<span style="margin-left: 10px">{{ scope.row.check_time_text }}</span>
							</template>
						</el-table-column>
						<el-table-column label="备注">
							<template #default="scope">
								{{ scope.row.mark }}
							</template>
						</el-table-column>
					</el-table>
				</el-row>
			</template>
			
			
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" v-if="['act_audit'].includes(dialogStatus)"  :loading="loading3" @click="doData('act_doend')">通 过</el-button>
				<el-button type="primary" v-if="['act_audit'].includes(dialogStatus)" :loading="loading3" @click="doData('act_doback')">退 回</el-button>
				<el-button :disabled="loading3" @click="closeDialog">关 闭</el-button>
			</div>
		</template>

		

	</el-dialog>


</template>
<script setup lang="ts">
	import { useRoute } from 'vue-router';
	import _ from 'lodash-es'
	import { onFilePreview } from "@/utils/funcall"
	import { useBaseConfigStore } from "@/store/modules/baseConfig";
	const baseConfigStore = useBaseConfigStore();
	import { BUSINESS_TYPE } from "@/utils/constant";
	import {
		pushEngineeringPaymentCheck
	} from "@/api/engine";
	const props = defineProps({
		//数据列表索引值  例如 user ->对应着 vuex  == user_cxxxxx模块
		dialogTitle: {
			type: String,
			default: "添加信息"
		},
		dialogStatus: {
			type: String,
			default: "add_art"
		},
		dialogTableValue: {
			type: Object,
			default: () => { },
		}
	});
	const titModel = ref([{
		title: '待审核',
		type: 'info',
		value: 0
	}, {
		title: '已通过',
		type: 'success',
		value: 1
	}, {
		title: '已驳回',
		type: 'danger',
		value: 2
	}])
	const emit = defineEmits(['update:modelValue', 'initRefreshList']);
	const dialogVisible = ref(false);
	const loading2 = ref(false);//新增或者修改加载load按钮
	const loading3 = ref(false);//新增或者修改加载load按钮
	// 数据的data-ref
	const dataFormRef = ref(ElForm);
	const dataInfo = ref<any>({});
	const formData = ref<any>({
		id:undefined,
		mark:"",
		status:""
	})

	const rules = reactive<any>({})

	watch(
		() => props.dialogTableValue,
		() => {
			if (props.dialogStatus == "act_audit") {
				let deepItem = _.cloneDeep(props.dialogTableValue)
				getAuditDetail(deepItem);
			}
			else if (props.dialogStatus == "act_info") {
				console.log('查看详情')
			
				let deepItem = _.cloneDeep(props.dialogTableValue)
				getAuditDetail(deepItem);
			}
		}, { deep: true, immediate: true })


	// 关闭弹窗
	function closeDialog() {
		if (!loading3.value) {
			emit('update:modelValue', false)
		}
	}

	// 获取详情
	function getAuditDetail(row) {
		console.log(row);
		dataInfo.value = row;
		formData.value.id = row.id;	
	}

	// 处理结果
	function doData(act:string){
		let dostatus = 0;
		switch (act) {
		  case 'act_doend':
			dostatus= 1
		    break
		  case 'act_doback':
			dostatus= 2
		    break
		  default:
			ElMessage.error('无效操作')
		}
		if (['act_doend', 'act_doback'].includes(act)){
			// 退回
			var data = {
				mark:formData.value.mark,
				status:dostatus,
				id:formData.value.id
			}
			console.log(data);
			loading3.value = true
			pushEngineeringPaymentCheck(data).then((res) => {
				loading3.value = false;
				ElMessage({ message:res.msg, type: 'success' })
				closeDialog();
				emit('initRefreshList')
			}).finally(() => {
				loading3.value = false;
			})
		}
	}


	onMounted(() => {
	
	});
</script>

<style lang="scss" scoped>

</style>